<template>
  <div class="layout-tabbar">
    <Tabbar v-model="active">
      <TabbarItem
        @click="toPath(item.path)"
        v-for="item in tabbars.tabbarRouters"
        :key="item.path"
        :name="item.name"
        :icon="item.icon"
      >
        {{ item.name }}
      </TabbarItem>
    </Tabbar>
  </div>
</template>
<script lang="ts" setup>
import tabbars from "@/router/tabbars";
import { Tabbar, TabbarItem } from "vant";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
const active = ref(0);

const router = useRouter();

const toPath = (path: string) => {
  router.push(path);
};
watch(
  () => router.currentRoute.value.fullPath,
  (newValue, oldValue) => {
    active.value = tabbars.tabbarRouters.findIndex(
      (item) => item.path === newValue
    );
  },
  { immediate: true }
);
</script>
